<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>

        <el-card shadow="hover">
          <panel-group />
        </el-card>
        <el-row :gutter="10" style="margin-top: 10px;">
          <el-col :xs="24" :sm="15" :lg="13">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-s-order"></i>申请列表</span>
              </div>
              <vue-seamless-scroll :class-option="classOption" :data="dataOptions"
                style="height: 460px;overflow: hidden;">
                <template v-for="(item,index) in dataOptions">
                  <el-descriptions :column="4" border :labelStyle="{textAlign:'left',width:'160px'}"
                    :contentStyle="{textAlign:'left'}" direction="vertical">
                    <el-descriptions-item label="部门" span="2">
                      <template slot="label">
                        <i class="el-icon-office-building"></i>部门
                      </template>
                      {{item.deptName}}
                    </el-descriptions-item>
                    <el-descriptions-item label="仓库" span="2">
                      <template slot="label">
                        <i class="el-icon-box"></i>仓库
                      </template>
                      {{item.storeName}}
                    </el-descriptions-item>

                    <el-descriptions-item label="编号">
                      <template slot="label">
                        <i class="el-icon-document"></i>单号
                      </template>
                      <el-link type="primary" @click="handleInfo(item.id)">{{item.taskNo}}</el-link>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-caret-right"></i>
                        类型
                      </template>
                      <dict-tag :options="dict.type.oms_task_type" :value="item.type" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-guide"></i>配送方式
                      </template>
                      <el-tag v-if="item.delivery == '0'" type="success">安保押运</el-tag>
                      <el-tag v-else>自行配送</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="下单时间">
                      <template slot="label">
                        <i class="el-icon-document"></i>下单时间
                      </template>
                      {{item.createTime}}
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </vue-seamless-scroll>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="9" :lg="11">
            <!-- <el-card class="box-card" shadow="hover" style="margin-bottom: 10px;" :body-style="{padding:'5px'}">
            <div slot="header" class="clearfix">
              <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-s-grid"></i>快捷菜单</span>
            </div>
            <el-row :gutter="5" align="center">
              <el-col :xs="12" :sm="12" :lg="12" class="quickBtn" v-for="btn in quickBtns">
                <div @click="toRouterUrl(btn.path)">
                  <i :class="btn.icon"></i><br />
                  {{btn.name}}
                </div>
              </el-col>
            </el-row>
          </el-card> -->
            <!-- <el-card class="box-card" shadow="hover" style="margin-bottom: 10px;" :body-style="{padding:'5px'}">
            <div slot="header" class="clearfix">
              <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-warning"></i>异常预警</span>
            </div>
            <vue-seamless-scroll :class-option="classOption2" :data="activities" style="height: 255px;overflow: hidden;">
            <el-timeline>
                <el-timeline-item
                 v-for="(activity, index) in activities"
                 :key="index"
                 :timestamp="activity.createDate" placement="top">
                      <el-card>
                        <h4>{{activity.type == 1?'异常入库':'异常出库'}}</h4>
                        <p>{{activity.area + '/' +activity.locator}}</p>
                        <p>{{activity.proNo}}</p>
                        <p>{{activity.proName}}</p>
                      </el-card>
                    </el-timeline-item>
              </el-timeline>

              </vue-seamless-scroll>
          </el-card> -->
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-s-order"></i>待办事项</span>
              </div>
              <ScheduleGroup :datas="scheduleDatas"/>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 10px;">
          <el-card class="box-card" shadow="hover" style="margin-bottom: 10px;" :body-style="{padding:'5px'}">
            <div slot="header" class="clearfix">
              <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-warning"></i>出入库监控</span>
            </div>
            <vue-seamless-scroll :class-option="classOption" :data="activities" style="height: 275px;overflow: hidden;">
              <el-table v-loading="loading" :data="activities" border stripe>
                <el-table-column type="index" width="55" align="center" fixed="left" />
                <el-table-column label="物品编号" align="left" prop="proNo" min-width="220" fixed="left" />
                <el-table-column label="物品名称" align="left" prop="proName" min-width="120" fixed="left" />
                <el-table-column label="库区/库位" align="left" prop="locator" min-width="220">
                  <template slot-scope="scope">
                    {{scope.row.area ? scope.row.area+"/" :""}}
                    {{scope.row.groupName ? scope.row.groupName+"/" :""}}
                    {{scope.row.cabinetName ? scope.row.cabinetName+"/" :""}}
                    {{scope.row.locator ? scope.row.locator :""}}
                  </template>
                </el-table-column>
                <el-table-column label="标签码" align="left" prop="qrcode" min-width="160" />
                <!-- <el-table-column label="EPC" align="center" prop="epc" /> -->
                <!-- <el-table-column label="GPI触发数据" align="center" prop="gpiInfo" /> -->
                <el-table-column label="是否报警" align="center" prop="alert">
                  <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.alert == 0">否</el-tag>
                    <el-tag type="danger" v-if="scope.row.alert == 1">是</el-tag>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="天线ID" align="center" prop="tid" /> -->
                <el-table-column label="监控时间" align="center" prop="createDate" width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createDate) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="类型" align="center" prop="type" fixed="right">
                  <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.type == 1">入库</el-tag>
                    <el-tag type="danger" v-if="scope.row.type == 2">出库</el-tag>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <template v-for="(item,index) in activities">
              <el-descriptions :column="8" border :labelStyle="{textAlign:'left',width:'160px'}" :contentStyle="{textAlign:'left'}" direction="vertical">
                <el-descriptions-item>
                  {{index}}
                </el-descriptions-item>
                <el-descriptions-item label="物品编号">
                  {{item.proNo}}
                </el-descriptions-item>
                <el-descriptions-item label="物品名称">
                  {{item.proName}}
                </el-descriptions-item>
                <el-descriptions-item label="库区">
                  {{item.area}}
                </el-descriptions-item>
                <el-descriptions-item label="库位">
                  {{item.locator}}
                </el-descriptions-item>
                <el-descriptions-item label="是否报警">
                  <template>
                      <el-tag type="info" v-if="item.alert == 0">否</el-tag>
                      <el-tag type="danger" v-if="item.alert == 1">是</el-tag>
                    </template>
                </el-descriptions-item>
                <el-descriptions-item label="预警时间">
                  <span>{{ parseTime(item.createDate) }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="类型">
                  <template>
                    <el-tag type="warning" v-if="item.type == 1">入库</el-tag>
                    <el-tag type="danger" v-if="item.type == 2">出库</el-tag>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </template> -->
            </vue-seamless-scroll>
            <!-- <el-table v-loading="loading" :data="activities" border stripe>
          <el-table-column type="index" width="55" align="center" fixed="left"/>
          <el-table-column label="物品编号" align="center" prop="proNo" min-width="200" fixed="left"/>
          <el-table-column label="物品名称" align="center" prop="proName" min-width="160" fixed="left"/>
          <el-table-column label="库区" align="center" prop="area"/>
          <el-table-column label="库位" align="center" prop="locator" />
          <el-table-column label="是否报警" align="center" prop="alert">
          <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.alert == 0">否</el-tag>
              <el-tag type="danger" v-if="scope.row.alert == 1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="预警时间" align="center" prop="createDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center" prop="type" fixed="right">
            <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.type == 1">入库</el-tag>
              <el-tag type="danger" v-if="scope.row.type == 2">出库</el-tag>
            </template>
          </el-table-column>
        </el-table> -->
          </el-card>
        </el-row>
        <el-row :gutter="10" style="margin-top: 10px;">
          <el-col :xs="24" :sm="12" :lg="12">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-s-home"></i>库存情况</span>
              </div>
              <ku-cun-bar-chart />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-s-data"></i>物品统计</span>
              </div>
              <cai-wu-pie-chart />
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 10px;">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-s-unfold"></i>入库统计</span>
              </div>
              <el-row :gutter="5" align="center">
                <el-col :xs="24" :sm="12" :lg="12">
                  <ru-ku-line-chart />
                </el-col>
                <el-col :xs="24" :sm="12" :lg="12">
                  <ru-ku-stacked-area-chart />
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 10px;">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-s-fold"></i>出库统计</span>
              </div>
              <el-row :gutter="5" align="center">
                <el-col :xs="24" :sm="24" :lg="24">
                  <chu-ku-bar-line-chart />
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="10" style="margin-top: 10px;">
           <el-col :xs="24" :sm="24" :lg="24">
              <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                  <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-truck"></i>运力情况</span>
                </div>
                <el-row :gutter="5" align="center">
                  <el-col :xs="24" :sm="12" :lg="12">
                   <che-liang-funnel-chart/>
                  </el-col>
                  <el-col :xs="24" :sm="12" :lg="12">
                   <ren-yuan-pie-chart />
                  </el-col>
                </el-row>
              </el-card>
           </el-col>
         </el-row> -->
        <el-row :gutter="10" style="margin-top: 10px;">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-s-claim"></i>订单统计</span>
              </div>
              <ding-dan-line-chart />
            </el-card>
          </el-col>
        </el-row>
       <!-- <el-row :gutter="10" style="margin-top: 10px;">
          <el-col :xs="24" :sm="24" :lg="24">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span style="color: darkslategrey;font-size: 13px;"><i class="el-icon-s-flag"></i>运单统计</span>
              </div>
              <yun-dan-line-chart />
            </el-card>
          </el-col>
        </el-row> -->
        <el-drawer title="申请详情" :visible.sync="show" size="70%" :before-close="handleClose">
          <el-card>
            <div style="margin:0px 10px 15px 10px;" class="clearfix">
              <span style="font-size: 20px;">{{form.taskNo}}</span>
            </div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="申请详情" name="1">
                <el-card>
                  <el-descriptions title="基本信息" :column="3" border>
                    <template v-if="form.type == '0'">
                      <el-descriptions-item
                        :label="form.delivery == '0' ? '寄件单位':'送件单位'">{{form.deptName}}</el-descriptions-item>
                      <el-descriptions-item
                        :label="form.delivery == '0' ? '寄件人':'送件人'">{{form.name}}</el-descriptions-item>
                    </template>
                    <template v-else>
                      <el-descriptions-item label="申请单位">{{form.deptName}}</el-descriptions-item>
                      <el-descriptions-item label="申请人">{{form.name}}</el-descriptions-item>
                    </template>
                    <el-descriptions-item label="联系电话">{{form.tel}}</el-descriptions-item>
                    <template v-if="form.type == '0'">
                      <el-descriptions-item v-if="form.delivery == '0'" label="寄件地址"
                        :span="3">{{form.address}}</el-descriptions-item>
                    </template>
                    <template v-else>
                      <el-descriptions-item v-if="form.delivery == '0'" label="联系地址"
                        :span="3">{{form.address}}</el-descriptions-item>>
                    </template>
                    <template v-if="form.type == '1'">
                      <el-descriptions-item label="收件单位">{{form.takeDeptName}}</el-descriptions-item>
                      <el-descriptions-item label="收件人">{{form.takeContacts}}</el-descriptions-item>
                      <el-descriptions-item label="联系电话">{{form.takeTel}}</el-descriptions-item>
                      <el-descriptions-item label="收件地址" :span="3">{{form.takeAddress}}</el-descriptions-item>
                    </template>
                    <el-descriptions-item label="物证类型">
                      <dict-tag :options="dict.type.oms_property_type" :value="form.propertyType" />
                    </el-descriptions-item>
                    <el-descriptions-item label="物流配送">
                      <dict-tag :options="dict.type.oms_delivery_type" :value="form.delivery" />
                    </el-descriptions-item>
                    <template v-if="form.type == '0'">
                      <el-descriptions-item :label="form.delivery == '0'?'期望上门时间':'预计到货时间'">
                        <span>{{ parseTime(form.expectTime, '{y}-{m}-{d}') }}</span>
                      </el-descriptions-item>
                    </template>
                    <template v-else>
                      <el-descriptions-item label="申请时间">
                        <span>{{ parseTime(form.requestTime, '{y}-{m}-{d}') }}</span>
                      </el-descriptions-item>
                    </template>
                    <el-descriptions-item label="物品数量">{{form.nums}}</el-descriptions-item>
                    <el-descriptions-item label="物品重量">{{form.weight}}</el-descriptions-item>
                    <el-descriptions-item label="物品体积">{{form.volume}}</el-descriptions-item>
                    <el-descriptions-item label="是否拖车">{{form.isTrailer == '0'?'否':'是'}}</el-descriptions-item>
                    <el-descriptions-item
                      :label="form.type == '0'?'入库仓库':(form.type == '1'?'出库仓库':(form.type=='2'?'处置仓库':'调用仓库'))">{{form.storeName}}</el-descriptions-item>
                    <el-descriptions-item :label="form.type == '0'?'申请备注':'出库原因'">{{form.remark}}</el-descriptions-item>
                    <template v-if="form.type == '3'">
                      <el-descriptions-item label="归还时间">{{form.returnTime}}</el-descriptions-item>
                      <el-descriptions-item label="调用原因">{{form.dispatchRemark}}</el-descriptions-item>
                    </template>
                    <template v-if="form.type == '2'">
                      <el-descriptions-item label="处置方式">
                        <dict-tag :options="dict.type.wms_deal_type" :value="form.dealType" />
                      </el-descriptions-item>
                    </template>
                  </el-descriptions>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="财物清单" name="2">
                <el-card shadow="hover" style="margin-top: 10px;">
                  <div slot="header" class="clearfix">
                    <span>财物清单</span>
                  </div>
                  <el-table :data="form.items" border stripe>
                    <el-table-column label="物品编号" align="center" prop="pno">
                      <template slot-scope="scope">
                        <span>{{scope.row.pno}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="物品名称" align="center" prop="name">
                      <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="数量" align="center" prop="nums">
                      <template slot-scope="scope">
                        <span>{{scope.row.nums}}</span>
                      </template>
                    </el-table-column>
                    <template v-if="form.type == '2'">
                      <el-table-column label="处置方式" align="center" prop="dealType">
                        <template slot-scope="scope">
                          <dict-tag :options="dict.type.wms_deal_type" :value="scope.row.dealType" />
                        </template>
                      </el-table-column>
                    </template>
                  </el-table>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="交接信息" name="3" v-if="handoverOptions.length > 0">
                <template v-for="item in handoverOptions">
                  <el-collapse>
                    <el-collapse-item name="0">
                      <div slot="title">
                        <span style="font-size: 18px;">{{item.type =='0'?'取件交接':'收件交接'}}</span>
                      </div>
                      <el-card>
                        <div slot="header">
                          <span>基本信息</span>
                        </div>
                        <el-descriptions :column="2" border>
                          <el-descriptions-item
                            :label="item.type =='0'?'取件人':'派件人'">{{item.operatorName}}</el-descriptions-item>
                          <el-descriptions-item label="对接人">{{item.counterpartName}}</el-descriptions-item>
                          <el-descriptions-item :label="item.type =='0'?'取件签名':'派件签名'">
                            <el-image style="width: 100px; height: 100px" :src="item.signs"
                              :preview-src-list="[item.signs]">
                            </el-image>
                          </el-descriptions-item>
                          <el-descriptions-item label="对接人签名">
                            <el-image style="width: 100px; height: 100px" :src="item.counterpartSign"
                              :preview-src-list="[item.counterpartSign]">
                            </el-image>
                          </el-descriptions-item>
                          <el-descriptions-item
                            label="交接时间">{{ parseTime(item.handTime, '{y}-{m}-{d}') }}</el-descriptions-item>
                          <el-descriptions-item label="交接备注">{{ item.memo}}</el-descriptions-item>
                          <el-descriptions-item label="交接附件" :span="2">
                            <template v-if="item.handPics">
                              <el-image v-for="(pic,pindex) in item.handPics.split(',')"
                                style="width: 120px; height: 60px;margin-right: 5px;" :src="pic" fit="scale-down"
                                :preview-src-list="item.handPics.split(',')"></el-image>
                            </template>
                          </el-descriptions-item>
                        </el-descriptions>
                      </el-card>
                      <el-card style="margin-top: 10px;">
                        <div slot="header">
                          <span>交接清单</span>
                        </div>
                        <el-table :data="item.items">
                          <el-table-column label="编号" prop="pno"></el-table-column>
                          <el-table-column label="名称" prop="name"></el-table-column>
                          <el-table-column label="数量" prop="nums"></el-table-column>
                          <el-table-column label="图片" prop="pics">
                            <template slot-scope="scope">
                              <el-image v-for="(pic,pindex) in scope.row.pics.split(',')"
                                style="width: 120px; height: 60px;margin-right: 5px;" :src="pic" fit="scale-down"
                                :preview-src-list="scope.row.pics.split(',')"></el-image>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-card>
                    </el-collapse-item>
                  </el-collapse>
                </template>
              </el-tab-pane>
              <el-tab-pane label="配送信息" name="4" v-if="orderOptions && checkPermi(['datas:query:tms'])">
                <el-tabs tab-position="left">
                  <el-tab-pane label="订单信息">
                    <el-descriptions title="基本信息" :column="3" border>
                      <el-descriptions-item label="订单编号">{{orderOptions.orderNo}}</el-descriptions-item>
                      <el-descriptions-item label="所属部门">{{orderOptions.deptName}}</el-descriptions-item>
                      <el-descriptions-item label="客户名称">{{orderOptions.clientName}}</el-descriptions-item>
                      <el-descriptions-item label="联系人">{{orderOptions.clientContacts}}</el-descriptions-item>
                      <el-descriptions-item label="联系电话">{{orderOptions.clientTel}}</el-descriptions-item>
                      <el-descriptions-item label="备注">{{orderOptions.memo}}</el-descriptions-item>
                      <el-descriptions-item label="物品数量">{{orderOptions.nums}}</el-descriptions-item>
                      <el-descriptions-item label="物品重量">{{orderOptions.weight}}</el-descriptions-item>
                      <el-descriptions-item label="物品体积">{{orderOptions.volume}}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions title="寄收地址" :column="3" border style="margin-top: 15px;">
                      <el-descriptions-item label="寄件单位">{{orderOptions.sendAddr}}</el-descriptions-item>
                      <el-descriptions-item label="寄件联系人">{{orderOptions.sendContacts}}</el-descriptions-item>
                      <el-descriptions-item label="联系方式">{{orderOptions.sendTel}}</el-descriptions-item>
                      <el-descriptions-item label="寄件地址" :span="3">{{orderOptions.sendAddress}}</el-descriptions-item>
                      <el-descriptions-item label="收件单位">{{orderOptions.takeAddr}}</el-descriptions-item>
                      <el-descriptions-item label="收件联系人">{{orderOptions.takeContacts}}</el-descriptions-item>
                      <el-descriptions-item label="联系方式">{{orderOptions.takeTel}}</el-descriptions-item>
                      <el-descriptions-item label="收件地址" :span="3">{{orderOptions.takeAddress}}</el-descriptions-item>
                    </el-descriptions>
                    <el-card style="margin-top: 15px;">
                      <div slot="header" class="clearfix">
                        <span style="font-weight: bold;">物品清单</span>
                      </div>
                      <el-table :data="orderOptions.items">
                        <el-table-column label="编号" prop="pno" />
                        <el-table-column label="名称" prop="name" />
                        <el-table-column label="数量" prop="nums" />
                      </el-table>
                    </el-card>
                  </el-tab-pane>
                  <el-tab-pane label="运单信息">
                    <template v-for="item in orderOptions.wayItems">
                      <el-collapse>
                        <el-collapse-item :title="item.waybillNo">
                          <el-descriptions :column="3" border>
                            <el-descriptions-item label="运单编号">{{item.waybillNo}}</el-descriptions-item>
                            <el-descriptions-item label="线路">{{item.lineName}}</el-descriptions-item>
                            <el-descriptions-item label="车次">{{item.scheduleName}}</el-descriptions-item>
                            <el-descriptions-item label="车牌号">{{item.carNumber}}</el-descriptions-item>
                            <el-descriptions-item label="司机" :span="2">{{item.driverName}}</el-descriptions-item>
                            <el-descriptions-item label="物品数量">{{item.nums}}</el-descriptions-item>
                            <el-descriptions-item label="物品重量">{{item.weight}}</el-descriptions-item>
                            <el-descriptions-item label="物品体积">{{item.volume}}</el-descriptions-item>
                          </el-descriptions>
                          <el-card style="margin-top: 15px;">
                            <div slot="header" class="clearfix">
                              <span style="font-weight: bold;">物品清单</span>
                            </div>
                            <el-table :data="item.items">
                              <el-table-column label="编号" prop="pno" />
                              <el-table-column label="名称" prop="name" />
                              <el-table-column label="数量" prop="nums" />
                            </el-table>
                          </el-card>
                          <el-card style="margin-top: 15px;">
                            <div slot="header" class="clearfix">
                              <span style="font-weight: bold;">日志跟踪</span>
                            </div>
                            <el-table :data="item.logItems">
                              <el-table-column label="操作人" prop="operator" />
                              <el-table-column label="节点名称">
                                <template slot-scope="scope">
                                  <dict-tag :options="dict.type.tms_track_log_type" :value="scope.row.type" />
                                </template>
                              </el-table-column>
                              <el-table-column label="操作时间" prop="createTime"></el-table-column>
                              <el-table-column label="备注" prop="memeo" />
                            </el-table>
                          </el-card>
                        </el-collapse-item>
                      </el-collapse>
                    </template>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane>
              <el-tab-pane label="上架任务" name="5"
                v-if="putTaskOptions && putTaskOptions.id && checkPermi(['datas:query:wms'])">
                <el-descriptions title="基本信息" :column="3" border style="margin-top: 15px;">
                  <el-descriptions-item label="任务编号">{{putTaskOptions.taskNo}}</el-descriptions-item>
                  <el-descriptions-item label="上架员">{{putTaskOptions.nickName}}</el-descriptions-item>
                  <el-descriptions-item label="状态">
                    <dict-tag :options="dict.type.wms_put_task_status" :value="putTaskOptions.status" />
                  </el-descriptions-item>
                </el-descriptions>
                <el-card style="margin-top: 15px;">
                  <div slot="header" class="clearfix">
                    <span>物品清单</span>
                  </div>
                  <el-table :data="putTaskOptions.items">
                    <el-table-column label="编号" prop="pno" />
                    <el-table-column label="名称" prop="name" />
                    <el-table-column label="数量" prop="nums" />
                    <el-table-column label="状态" prop="nums">
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.wms_put_task_status" :value="scope.row.status" />
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="挑拣任务" name="5"
                v-if="pickOptions && pickOptions.id && checkPermi(['datas:query:wms'])">
                <el-descriptions title="基本信息" :column="3" border style="margin-top: 15px;">
                  <el-descriptions-item label="任务编号">{{pickOptions.pickNo}}</el-descriptions-item>
                  <el-descriptions-item label="挑拣员">{{pickOptions.nickName}}</el-descriptions-item>
                  <el-descriptions-item label="状态">
                    <dict-tag :options="dict.type.wms_pick_task_status" :value="pickOptions.status" />
                  </el-descriptions-item>
                </el-descriptions>
                <el-card style="margin-top: 15px;">
                  <div slot="header" class="clearfix">
                    <span>物品清单</span>
                  </div>
                  <el-table :data="pickOptions.items">
                    <el-table-column label="编号" prop="pno" />
                    <el-table-column label="名称" prop="name" />
                    <el-table-column label="数量" prop="nums" />
                    <el-table-column label="状态" prop="nums">
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.wms_pick_task_status" :value="scope.row.status" />
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="操作日志" name="6">
                <el-table :data="logOptions">
                  <el-table-column label="操作人" prop="operator" />
                  <el-table-column label="操作时间" prop="logTime" />
                  <el-table-column label="动作" prop="content" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-drawer>

        <el-drawer title="申请详情" :visible.sync="viewshow" size="70%" :before-close="handleShowClose">
          <div class="mainDiv" style="padding-top: 60px;">
            <el-container class="main_container">
              <el-main>
                <el-tabs v-model="activeName">
                  <el-tab-pane label="基本信息" name="0">
                     <el-card class="box-card mt10">
                       <div slot="header" class="clearfix">
                         <span>基本信息</span>
                       </div>
                        <el-descriptions class="margin-top" :column="2"  border>
                            <el-descriptions-item label="看样编号">{{form.viewingNo}}</el-descriptions-item>
                            <el-descriptions-item label="仓库" v-if="form.type == '0'">{{form.storeName}}</el-descriptions-item>
                            <el-descriptions-item label="联系人">{{form.name}}</el-descriptions-item>
                            <el-descriptions-item label="联系电话">{{form.tel}}</el-descriptions-item>
                            <el-descriptions-item label="证件类型" v-if="form.type == '0'">{{form.cardType=='0'?'身份证':'警官证'}}</el-descriptions-item>
                            <el-descriptions-item label="证件号码" v-if="form.type == '0'">{{form.idCard}}</el-descriptions-item>
                            <el-descriptions-item label="申请时间">
                              {{ parseTime(form.applyDay) }}
                            </el-descriptions-item>
                            <el-descriptions-item label="状态">
                              <dict-tag :options="dict.type.wms_view_status" :value="form.status" />
                            </el-descriptions-item>
                            <el-descriptions-item label="审核状态">
                              <dict-tag :options="dict.type.sys_check_status" :value="form.checkStatus" />
                            </el-descriptions-item>
                            <el-descriptions-item label="审核不通过理由" v-if="form.checkStatus == '2'">
                              {{form.memo}}
                            </el-descriptions-item>
                          </el-descriptions>
                     </el-card>
                     <el-card class="box-card mt10" v-if="form.type == '0'">
                       <div slot="header" class="clearfix">
                         <span>附件信息</span>
                       </div>
                        <el-descriptions class="margin-top" :column="2"  border>
                            <el-descriptions-item label="证件照">
                              <el-image v-if="form.oss && form.oss.length > 0" v-for="(pic,pindex) in form.oss"
                                style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')" fit="scale-down"
                                :preview-src-list="ossTransfer(form.oss,'list')"></el-image>
                            </el-descriptions-item>
                            <el-descriptions-item label="物品附件">
                              <el-image v-if="form.itemsOss && form.itemsOss.length > 0" v-for="(pic,pindex) in form.itemsOss"
                                style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')" fit="scale-down"
                                :preview-src-list="ossTransfer(form.itemsOss,'list')"></el-image>
                            </el-descriptions-item>
                            <el-descriptions-item label="中心受理人签名">
                              <el-image style="width: 120px; height: 60px;margin-right: 5px;" :src="getPictureHost()+form.centerSign"/>
                            </el-descriptions-item>
                           <el-descriptions-item label="阅证人签名">
                             <el-image style="width: 120px; height: 60px;margin-right: 5px;" :src="getPictureHost()+form.signs"/>
                           </el-descriptions-item>
                          </el-descriptions>
                     </el-card>
                  </el-tab-pane>
                  <el-tab-pane label="物品清单" name="1">
                    <el-card class="box-card mt10">
                      <div slot="header" class="clearfix">
                        <span>物品清单</span>
                      </div>
                      <el-table :data="form.items" border stripe>
                        <el-table-column type="index" width="55" align="center"></el-table-column>
                        <el-table-column label="物品编号" align="left" prop="pno" width="260">
                          <template slot-scope="scope">
                            <span>{{scope.row.pno}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="物品名称" align="left" prop="name" width="200">
                          <template slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="数量" align="center" prop="nums" width="75">
                          <template slot-scope="scope">
                            <span>{{scope.row.nums}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="图片" align="left" prop="oss">
                          <template slot-scope="scope">
                            <el-image v-if="scope.row.oss && scope.row.oss.length > 0" v-for="(pic,pindex) in scope.row.oss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')" fit="scale-down"
                              :preview-src-list="ossTransfer(scope.row.oss,'list')"></el-image>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-tab-pane>
                  <el-tab-pane label="阅证单" name="2">
                    <el-card class="mb10 mt10" shadow="hover">
                      <div slot="header" class="clearfix" >
                        <el-button type="warning" icon="el-icon-printer"   size="mini" class="fr ml10" @click="handlePrint(taskNoTitle+form.taskNo)">下载打印</el-button>
                        <el-button type="primary" icon="el-icon-view"   size="mini" class="fr" @click="handlePrintInfo()">在线查看</el-button>
                      </div>
                       <div  ref="printHandover" id="printHandover">
                         <el-card id="handoverCard" class="box-card" style="padding: 50px 2vw 30px 2vw;background-color:#fff;" shadow="never">
                           <div slot="header" style="text-align: center;font-size:18px;margin-bottom: 20px;font-weight: 800;padding-bottom: 15px;">
                               <span>涉案财物现场阅证单</span>
                           </div>
                           <el-descriptions :column="3" class="mb10 mt10" :labelStyle="{'backgroundColor':'#fff','fontSize':'16px','fontWeight':'bold'}" :contentStyle="{'fontSize':'16px','fontWeight':'bold'}">
                             <el-descriptions-item label="阅证编号">{{form.viewingNo}}</el-descriptions-item>
                             <el-descriptions-item label="保管员">{{form.storeUser}}</el-descriptions-item>
                             <el-descriptions-item label="阅证时间">{{parseTime(form.applyDay) }}</el-descriptions-item>
                             <el-descriptions-item label="订单审核人">{{form.checker}}</el-descriptions-item>
                             <el-descriptions-item label="阅证人">{{form.name}}</el-descriptions-item>
                             <el-descriptions-item label="证件类型">{{form.cardType=='0'?'身份证':'警官证'}}</el-descriptions-item>
                             <el-descriptions-item label="证件号">{{form.idCard}}</el-descriptions-item>
                           </el-descriptions>
                           <el-table :data="form.items" border :headerCellStyle="{'backgroundColor':'#fff','fontSize':'16px','fontWeight':'bold'}" :cell-style="{'fontSize':'16px','fontWeight':'bold','border-bottom':'1px soild #000'}">
                             <el-table-column label="序号" type="index" width="60" align="center"/>
                             <el-table-column label="财物编号" prop="pno" width="260" align="center"/>
                             <el-table-column label="财物名称" prop="name"width="220" align="center"/>
                             <el-table-column label="数量" prop="nums" width="75" align="center"/>
                             <el-table-column label="特征" prop="character" header-align="center"/>
                             <el-table-column label="保管仓库" prop="storeName" align="center"/>
                             <el-table-column label="库位" prop="locatorName" header-align="center"/>
                           </el-table>
                           <el-row class="mt20">
                             <el-col :span="8" style="padding: 10px 15px;">
                               <div class="mb5">
                                 <span>保管员签字</span>
                               </div>
                                 <span>
                                   <el-image v-if="form.centerSign" class="imgSize" :src="getPictureHost()+form.centerSign" :preview-src-list="[getPictureHost()+form.centerSign]" />
                                   <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')" />
                                   <span>{{'签字时间：'+(form.centerTime && form.centerSign?form.centerTime:'')}}</span>
                                 </span>
                             </el-col>
                             <el-col :span="8" style="padding: 10px 15px;">
                               <div class="mb5">
                                 <span>阅证人签字</span>
                               </div>
                                 <span>
                                   <el-image v-if="form.signs" class="imgSize" :src="getPictureHost()+form.signs" :preview-src-list="[getPictureHost()+form.signs]" />
                                   <el-image v-else class="imgSize" :src="require('@/assets/images/default-img.png')" />
                                   <span>{{'签字时间：'+(form.signsTime && form.signs?form.signsTime:'')}}</span>
                                 </span>
                             </el-col>
                           </el-row>
                         </el-card>
                       </div>
                    </el-card>
                  </el-tab-pane>
                </el-tabs>
              </el-main>
            </el-container>
          </div>
        </el-drawer>

      </el-main>
    </el-container>
  </div>
</template>

<script>
  import KuCunBarChart from './dashboard/KuCunBarChart'
  import CaiWuPieChart from './dashboard/CaiWuPieChart'
  import RuKuLineChart from './dashboard/RuKuLineChart'
  import RuKuStackedAreaChart from './dashboard/RuKuStackedAreaChart'
  import ChuKuBarLineChart from './dashboard/ChuKuBarLineChart'
  import DingDanLineChart from './dashboard/DingDanLineChart'
  import CheLiangFunnelChart from './dashboard/CheLiangFunnelChart'
  import RenYuanPieChart from './dashboard/RenYuanPieChart'
  import YunDanLineChart from './dashboard/YunDanLineChart'
  import vueSeamlessScroll from 'vue-seamless-scroll'
  import {
    getIndexSchedule
  } from '@/api/center'
  import {
    listTask,
    getTask
  } from '@/api/oms/task'
  import {
    listHandover
  } from '@/api/wms/handover'
  import {
    getOrderTask
  } from '@/api/tms/order'
  import {
    getPickTask
  } from '@/api/wms/pick'
  import {
    getPutTaskByTask
  } from '@/api/wms/putTask'
  import {
    listOperatorLog
  } from "@/api/oms/operatorLog"
  import {
    listDetectLog
  } from "@/api/oms/detectLog";
  import {
    getViewing
  } from "@/api/wms/viewing";
  import PanelGroup from './dashboard/PanelGroup'
  import ScheduleGroup from './dashboard/ScheduleGroup'
  export default {
    name: 'Index',
    components: {
      KuCunBarChart,
      CaiWuPieChart,
      RuKuLineChart,
      RuKuStackedAreaChart,
      ChuKuBarLineChart,
      DingDanLineChart,
      CheLiangFunnelChart,
      RenYuanPieChart,
      YunDanLineChart,
      vueSeamlessScroll,
      PanelGroup,
      ScheduleGroup
    },

    computed: {
      classOption() {
        return {
          step: 1, // 数值越大速度滚动越快
          limitMoveNum: 1
        }
      },
      classOption2() {
        return {
          step: 1, // 数值越大速度滚动越快
          limitMoveNum: 3
        }
      }
    },
    dicts: ['oms_delivery_type', 'oms_task_type', 'oms_property_type', 'wms_deal_type', 'wms_put_task_status',
      'wms_pick_task_status', 'index_schedule','wms_view_status','sys_check_status'
    ],
    data() {
      return {
        loading: false,
        quickBtns: [{
            name: '接收登记',
            color: 'color:#304156',
            icon: 'el-icon-document-checked',
            path: '/oms/staging'
          },
          {
            name: '入库申请',
            color: 'color:#304156',
            icon: 'el-icon-s-unfold',
            path: '/oms/warehouse'
          },
          {
            name: '出库申请',
            color: 'color:#304156',
            icon: 'el-icon-s-fold',
            path: '/oms/exWarehouse'
          },
          {
            name: '调用申请',
            color: 'color:#304156',
            icon: 'el-icon-s-operation',
            path: '/oms/transfer'
          },
          {
            name: '处置申请',
            color: 'color:#304156',
            icon: 'el-icon-s-check',
            path: '/oms/deal'
          },
          {
            name: '上架任务',
            color: 'color:#304156',
            icon: 'el-icon-upload2',
            path: '/wms/putTask'
          },
          {
            name: '挑拣任务',
            color: 'color:#304156',
            icon: 'el-icon-finished',
            path: '/wms/pick'
          },
          {
            name: '库存盘点',
            color: 'color:#304156',
            icon: 'el-icon-s-marketing',
            path: '/wms/wmsinventoryplan/inventoryPlan'
          },
          {
            name: '订单管理',
            color: 'color:#304156',
            icon: 'el-icon-document-copy',
            path: '/tms/order'
          },
          {
            name: '运单管理',
            color: 'color:#304156',
            icon: 'el-icon-s-grid',
            path: '/tms/waybill'
          }
        ],
        activities: [{
            content: '配送超时',
            timestamp: '2022-10-10 09:46',
            size: 'large',
            type: 'primary',
            icon: 'el-icon-more'
          },
          // {
          //   content: '支持自定义颜色',
          //   timestamp: '2018-04-03 20:46',
          //   color: '#0bbd87'
          // },
          {
            content: '取件异常',
            timestamp: '2022-10-09 15:16',
            size: 'large'
          }, {
            content: '派车超时',
            timestamp: '2022-10-08 12:38',
          }
        ],

        scheduleDatas: [{
          content: '取件异常',
          timestamp: '2022-10-09 15:16',
          size: 'large'
        }],

        dataOptions: [],
        handoverOptions: [],
        orderOptions: {},
        pickOptions: {},
        putTaskOptions: {},
        logOptions: [],
        show: false,
        viewshow:false,
        form: {},
        activeName: '1',
        activities: [{
            content: '配送超时',
            timestamp: '2022-10-10 09:46',
            size: 'large',
            type: 'primary',
            icon: 'el-icon-more'
          },
          {
            content: '取件异常',
            timestamp: '2022-10-09 15:16',
            size: 'large',
            icon: 'el-icon-more'
          }, {
            content: '派车超时',
            timestamp: '2022-10-08 12:38',
            size: 'large',
            icon: 'el-icon-more'
          }
        ]
      }
    },
    created() {
      this.getList();
      this.getScheduleIndex();
      this.getDetectLog();
    },
    methods: {
      getList() {
        listTask({
          delFlag: '0',
          pageNum: 1,
          pageSize: 30
        }).then(response => {
          this.dataOptions = response.rows;
        })
      },
      getDetectLog(){
        listDetectLog({
          delFlag: '0',
          pageNum: 1,
          pageSize: 20
        }).then(response => {
          this.activities = response.rows;
        });
      },
      getScheduleIndex() {
        getIndexSchedule().then(response => {
          this.scheduleDatas = response.data;
        })
      },
      getInfo(id) {
        getTask(id).then(response => {
          this.form = response.data;
        })
      },
      getHandover(id) {
        listHandover({
          'objid': id
        }).then(response => {
          this.handoverOptions = response.rows;
        })
      },
      getOrderInfo(id) {
        getOrderTask(id).then(response => {
          this.orderOptions = response.data;
        })
      },
      getPutTaskInfo(id) {
        getPutTaskByTask(id).then(response => {
          this.putTaskOptions = response.data;
        })
      },
      getPickInfo(id) {
        getPickTask(id).then(response => {
          this.pickOptions = response.data;
        })
      },
      getLogs(id) {
        listOperatorLog({
          "objid": id
        }).then(response => {
          this.logOptions = response.rows;
        })
      },
      handleInfo(id) {
        this.show = true;
        this.getInfo(id);
        this.getOrderInfo(id);
        this.getPickInfo(id);
        this.getPutTaskInfo(id);
        this.getHandover(id);
        this.getLogs(id);
      },
      handleViewInfo(id) {
        getViewing(id).then(response=>{
          this.form = response.data;
          this.viewshow = true;
        })
      },

      toBtn(item) {
        if (item.type == '0' || item.type == '1') {
          if (item.taskType == '0') {
            this.$router.push({
              path: '/oms/orderDispatch/warehouse?type=0',
              query: {
                pageNum: 1
              }
            })
          }
          if (item.taskType == '1') {
            this.$router.push({
              path: '/oms/orderDispatch/exWarehouse?type=1',
              query: {
                pageNum: 1
              }
            })
          }
          if (item.taskType == '3') {
            this.$router.push({
              path: '/oms/orderDispatch/transfer?type=3',
              query: {
                pageNum: 1
              }
            })
          }
          if (item.taskType == '2') {
            this.$router.push({
              path: '/deal/deal?type=2',
              query: {
                pageNum: 1
              }
            })
          }

        } else if (item.type == '2') {
          this.$router.push({
            path: '/wms/viewing/',
            query: {
              pageNum: 1
            }
          })
        } else if (item.type == '3') {
          this.$router.push({
            path: '/oms/warning',
            query: {
              pageNum: 1
            }
          })
        } else if (item.type == '4') {
          this.$router.push({
            path: '/oms/repay',
            query: {
              pageNum: 1
            }
          })
        }

      },

      handleClose() {
        this.show = false
      },
      handleShowClose() {
        this.viewshow = false
      },
      toRouterUrl(path) {
        this.$router.push({
          path: path,
          query: {
            pageNum: 1
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  .quickBtn {
    height: 60px;
    text-align: center;
    color: #2f4f4f;
    font-size: 13px;
    cursor: pointer;
    line-height: 20px;
    padding: 10px;
    background-color: #fafafa;
    border: 1px solid #fff;
  }

  .quickBtn:hover {
    background-color: #e8f4ff;
    color: #1890ff;
    border-radius: 5px;
    border-color: #d1e9ff;
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
